<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<h1 align="center">在线问答</h1>
<!--表单-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>发布问题</button>
    </div>
</script>

<!--表格-->
<table id="demo" lay-filter="test"></table>

<!--头工具-->

<!--//行工具-->
<script type="text/html" id="barDemo">
<!--    <a class="layui-btn layui-btn-xs" lay-event="detail">查看评论</a>    -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">回答</a>
<!--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" lay-submit lay-filter="dalete">删除</a>-->
</script>


<!-- 你的HTML代码 -->
<script src="/layui/layui.js"></script>


<script>
    //一般直接写在一个js文件中
    layui.use(['form','layer', 'table'], function(){
        var layer = layui.layer;
        var table = layui.table;
        var $=layui.$;
        var form=layui.form;

        //第一个实例,渲染table
        var tableIns= table.render({
            elem: '#demo'//映射table
            ,toolbar: '#toolbarDemo'//后面添加行工具
            ,height: 'full-20'//全屏
            ,url: 'http://localhost:8080/ques/list' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '序号',  sort: true, fixed: 'left'}//固定长度    sort: true排序
                ,{field: 'title', title: '问题类型',}
                ,{field: 'detaiDesc', title: '问题介绍'}
                ,{field: 'answerCount', title: '答题次数', }
                ,{field: 'lastModified', title: '问题上传时间',templet:function (d) {//时间
                        var d=new Date(d.lastModified);
                        var date = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() +'日';
                        return date;

                    }}
                ,{field: '', title: '操作',  toolbar: '#barDemo'}//排序 toolbar: '#barDemo'行工具
            ]]
        });
        // layer.msg('Hello World');
        //监听行工具事件，用户获取对应表格的内容
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
                layui.data('test',{key:"id",value:data.id})
                layer.open({   //弹窗层
                    type: 2    //2是跳到页面
                    ,area:["1000px","662px"]
                    ,title: '评价信息',//弹出层的封顶标题
                    content: 'http://localhost:8080/pingjia.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }  else if(layEvent === 'edit'){
                layer.msg('编辑操作');
                // console.log("index:"+data)
                //把数据存入到本地磁盘，然后在弹出层获取
                //将五个值传输到修改界面
                layui.data('test',{key:"id",value:data.id})
                layui.data('test',{key:"title",value:data.title})
                layui.data('test',{key:"detaiDesc",value:data.detaiDesc})

                //1弹出一个弹出层
                layer.open({   //弹窗层
                    type: 2    //2是跳到页面
                    ,area:["500px","500px"]
                    ,title: '评价信息',//弹出层的封顶标题
                    content: 'http://localhost:8080/pingjia.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }
        });
        // 监听头工具
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    // layer.msg('添加');
                    layer.open({   //弹窗层
                        type: 2
                        ,area:["500px","500px"]
                        ,title: '添加图书',//弹出层的封顶标题
                        content: 'http://localhost:8080/tianjia.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                    break;
            };
        });

        //获取表单数据

        // 查询按钮提交事件并且更新table
        // form.on('submit(*)', function(data){
        //     //让table重新加载，并且携带上表单的参数作为查询条件
        //     //获取表单数据
        //     layui.data('test',{key:"id",value:data.id})
        //     layer.open({   //弹窗层
        //         type: 2    //2是跳到页面
        //         ,area:["500px","500px"]
        //         ,title: '评价信息',//弹出层的封顶标题
        //         content: 'http://localhost:8080/tianjia.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        //     });
        //     return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        // });

    });
</script>
</body>
</html>